<script setup lang="ts">
import { ref } from 'vue'
//引入 store
import { useSkusList } from '@/store/modules/skus/index'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'

const store = useSkusList()
//控制tag显示隐藏
const show = ref(true)
//规格列表
interface SpecItem {
    inputValue: string //收集规格名称
    inputVisble: boolean //控制规格是否可编辑
    name: string
    version: string
    children: SpecItem[]
}
const specList = ref<SpecItem[]>([])
//控制添加tag弹窗
const showAddTag = ref(false)
//添加规格弹窗
const showAddSpec = ref(false)

//添加规格值value
const tagValue = ref('')
const SpecValue = ref('')
//用于判断现在点击的是哪个规格
const specName = ref('')

onShow(() => {
    //查看缓存中是否有规格数据
    const data = store.SkusList.specGroupList
    if (data) {
        data.forEach((item: any) => {
            item.inputValue = item.name
            item.inputVisble = false
            item.version = item.id
            item.children.forEach((child: any) => {
                child.inputValue = child.name
                child.inputVisble = false
                child.version = child.id
            })
        })
        specList.value = data
    }
    console.log('onShow', specList.value)
})
onLoad((res: any) => {
    uni.$emit('updateTitle')
})

// 删除 tag 回调
const tagClick = (e: string, res: string) => {
    console.log(e)
    // 通过e获取到当前点击的规格名称
    // 然后遍历specList 找到对应的规格名称 删除
    specList.value.forEach((item: any, index: any) => {
        if (item.name === e) {
            item.children.forEach((child: any, childIndex: any) => {
                if (child.name === res) {
                    item.children.splice(childIndex, 1)
                }
            })
        }
    })
    // show.value = false
}
/**
 * 添加规格回调 添加规格值回调
 */
const handleAddSpec = () => {
    showAddSpec.value = true
}
//控制添加规格值弹出框
const handleAddTag = (e: any) => {
    specName.value = e
    showAddTag.value = true
}
//点击添加规格值回调
const handleAddTagValue = () => {
    //判断规格值是否为空
    if (tagValue.value === '') {
        uni.showToast({
            title: '规格值不能为空',
            icon: 'none',
        })
        return
    }
    //判断当前规格中规格值是否重复  //判断规格值是否是否和规格名称重复
    let isRepeat = false
    specList.value.forEach((item: any) => {
        item.children.forEach((child: any) => {
            if (child.name === tagValue.value) {
                isRepeat = true
            }
        })
        if (item.name === tagValue.value) {
            isRepeat = true
        }
    })
    if (isRepeat) {
        uni.showToast({
            title: '规格值重复',
            icon: 'none',
        })
        return
    }
    //判断当前规格值在所有规格中是否重复

    let specitem = {
        name: tagValue.value,
        children: [],
        inputValue: tagValue.value, //收集规格值
        inputVisble: true, //控制tag是否可编辑
    }
    specList.value.forEach((item: any) => {
        if (item.name === specName.value) {
            item.children.push(specitem)
        }
    })
    //清空输入框
    tagValue.value = ''
    //关闭弹窗
    showAddTag.value = false
}
//添加规格回调
const handleAddSpecValue = () => {
    //非空判断
    if (specList.value.length >= 5) {
        uni.showToast({
            title: '规格总数最多5个',
            icon: 'none',
        })
        return
    }
    if (SpecValue.value === '') {
        uni.showToast({
            title: '规格名称不能为空',
            icon: 'none',
        })
        return
    }
    //判断规格名称是否重复 判断规格名称是否和规格值重复
    let isRepeat = false
    let isRepeatTag = false
    specList.value.forEach((item: any) => {
        if (item.name === SpecValue.value) {
            isRepeat = true
        }
        item.children.forEach((child: any) => {
            if (child.name === SpecValue.value) {
                isRepeatTag = true
            }
        })
    })
    if (isRepeat) {
        uni.showToast({
            title: '规格名称重复',
            icon: 'none',
        })
        return
    }
    if (isRepeatTag) {
        uni.showToast({
            title: '规格名称不能和规格值重复',
            icon: 'none',
        })
        return
    }
    let specitem = {
        inputValue: SpecValue.value, //收集规格名称
        inputVisble: false, //控制规格是否可编辑
        name: SpecValue.value,
        version: '',
        children: [],
    }
    specList.value.push(specitem)
    //清空输入框
    SpecValue.value = ''
    //关闭弹窗
    showAddSpec.value = false
}
//编辑规格回调
const handleEdit = (e: any) => {
    console.log(e)
    // 通过e获取到当前点击的规格名称 然后改变inputVisble的值
    specList.value.forEach((item: any) => {
        if (item.name === e) {
            item.inputVisble = true
            SpecValue.value = e
        }
    })
}
//编辑规格完成回调
const handleEditDone = (e: any) => {
    if (SpecValue.value === '') {
        uni.showToast({
            title: '规格名称不能为空',
            icon: 'none',
        })
        return
    }
    console.log('编辑完成', SpecValue.value)
    specList.value.forEach((item: any) => {
        if (item.name === e) {
            item.inputVisble = false
            item.inputValue = SpecValue.value
            item.name = SpecValue.value
        }
    })
    SpecValue.value = ''
}
//编辑规格删除回调
const handleDelet = (e: any) => {
    console.log('删除', e)
    specList.value.forEach((item: any, index: any) => {
        if (item.name === e) {
            specList.value.splice(index, 1)
        }
    })
}
/**
 * 编辑完成返回上一级
 */
const handleBack = () => {
    console.log('编辑完成返回上一级', specList.value)
    //存入pinia 在addShopDetail页面获取用
    store.SkusList.specGroupList = specList.value

    uni.navigateTo({
        url: '/basePackage/pages/shopsSystemone/components/GoodsOnShelf?id=1',
    })
}
</script>

<template>
    <view class="content">
        <view class="content__top">
            <template v-for="item in specList" :key="item">
                <view class="spec">
                    <view class="spec__title">
                        <template v-if="!item.inputVisble"
                            ><view>{{ item.inputValue }}</view></template
                        >
                        <template v-else><input v-model="SpecValue" class="spec__title--input" type="text" :maxlength="12" /></template>
                        <!-- 头部编辑规格的按钮 -->
                        <view>
                            <template v-if="!item.inputVisble">
                                <u-icon
                                    class="spec__icon"
                                    name="edit-pen-fill"
                                    color="rgba(42, 41, 232, 1)"
                                    size="40"
                                    :data-id="item.name"
                                    @click="() => handleEdit(item.name)"
                                ></u-icon>
                            </template>
                            <template v-else>
                                <u-icon
                                    class="spec__icon"
                                    name="checkbox-mark"
                                    color="rgba(42, 41, 232, 1)"
                                    size="40"
                                    :data-id="item.name"
                                    @click="() => handleEditDone(item.name)"
                                ></u-icon>
                            </template>
                            <u-icon
                                class="spec__icon"
                                name="trash-fill"
                                color="rgba(42, 41, 232, 1)"
                                size="40"
                                :data-id="item.name"
                                @click="() => handleDelet(item.name)"
                            ></u-icon>
                        </view>
                    </view>
                    <!-- 渲染规格值的地方 -->
                    <view class="spec__input" :scroll-y="true">
                        <template v-for="tagitem in item.children" :key="tagitem">
                            <u-tag
                                class="spec__input--icon"
                                :text="tagitem.inputValue"
                                closeable
                                :show="show"
                                size="mini"
                                @close="tagClick(item.name, tagitem.name)"
                            />
                        </template>
                    </view>
                    <!-- 添加规格值的弹窗 -->
                    <view class="spec__add">
                        <u-popup v-model="showAddTag" closeable="true" mode="center" border-radius="14" width="400rpx" height="200rpx">
                            <view class="spec__add--box">
                                <input v-model="tagValue" class="spec__add--input" type="text" :maxlength="28" />
                                <button class="spec__add--btn" :data-id="item.name" @click="handleAddTagValue">添加</button>
                            </view>
                        </u-popup>
                        <button class="content__bottom--btn" @click="($event) => handleAddTag(item.name)">添加规格值</button>
                    </view>
                </view>
            </template>
        </view>
        <view class="content__bottom">
            <button class="content__bottom--btn" @click="handleAddSpec">添加规格</button>
            <button class="content__bottom--btn2" @click="handleBack">完成</button>
        </view>
        <u-popup v-model="showAddSpec" closeable="true" mode="center" border-radius="14" width="400rpx" height="200rpx">
            <view class="spec__add--box">
                <input v-model="SpecValue" class="spec__add--input" type="text" :maxlength="10" />
                <button class="spec__add--btn" @click="handleAddSpecValue">添加</button>
            </view>
        </u-popup>
    </view>
</template>

<style lang="scss" scoped>
@include b(content) {
    width: 100vw;
    display: flex;
    flex-direction: column;
    @include e(top) {
        width: 100%;
        margin-bottom: 130rpx;
    }
    @include e(bottom) {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 110rpx;
        background-color: rgba(252, 252, 252, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        @include m(btn) {
            width: 500rpx;
            height: 70rpx;
            border: 2rpx solid rgba(42, 41, 232, 1);
            font-size: 26rpx;
            border-radius: 80rpx;
            height: 70rpx;
            line-height: 70rpx;
            background: linear-gradient(-84.98deg, rgba(42, 41, 232, 1) 3.82%, rgba(71, 85, 233, 1) 95.62%);
            color: rgba(250, 250, 250, 1);
        }
        @include m(btn2) {
            width: 150rpx;
            height: 70rpx;
            border: 2rpx solid rgba(42, 41, 232, 1);
            font-size: 26rpx;
            border-radius: 80rpx;
            height: 70rpx;
            line-height: 70rpx;
            background: linear-gradient(-84.98deg, rgba(42, 41, 232, 1) 3.82%, rgba(71, 85, 233, 1) 95.62%);
            color: rgba(250, 250, 250, 1);
        }
    }
}
@include b(spec) {
    width: 100%;
    display: flex;
    flex-direction: column;
    // height: 340rpx;
    margin-top: 20rpx;
    background-color: rgb(252, 252, 252);
    @include e(title) {
        font-size: 30rpx;
        font-weight: 700;
        color: #333;
        display: flex;
        height: 100rpx;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0 40rpx;
        border-bottom: 1px solid #f1efef;
        @include m(input) {
            width: 320rpx;
            height: 50rpx;
            border: 1px solid #151414;
            border-radius: 10rpx;
            padding-left: 20rpx;
        }
    }
    @include e(add) {
        font-size: 30rpx;
        display: flex;
        height: 100rpx;
        width: 100%;
        align-items: center;
        @include m(box) {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        @include m(input) {
            width: 320rpx;
            height: 50rpx;
            border: 1px solid #151414;
            border-radius: 10rpx;
            padding-left: 20rpx;
            margin-top: 40rpx;
        }
        @include m(btn) {
            margin-top: 15rpx;
            width: 120rpx;
            height: 50rpx;
            border-radius: 25rpx;
            line-height: 50rpx;
            font-size: 24rpx;
            color: rgba(250, 250, 250, 1);
            background: linear-gradient(-84.98deg, rgba(42, 41, 232, 1) 3.82%, rgba(71, 85, 233, 1) 95.62%);
        }
    }
    @include e(input) {
        display: flex;
        padding: 30rpx;
        flex: 1;
        flex-wrap: wrap;
        // overflow: hidden;
        @include m(icon) {
            margin-left: 20rpx;
            margin-bottom: 20rpx;
            height: 40rpx;
        }
    }
    @include e(icon) {
        width: 100rpx;
        height: 100rpx;
    }
}
</style>
